import { observer } from 'mobx-react'
import { useState, useEffect } from 'react'
import { Form, Input, Checkbox, Switch, Button, message } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import './addAppVersion.less'

const { TextArea } = Input

const AddAppVersion: React.FC = () => {
  const [form] = Form.useForm()
  const location = useLocation()
  const navigate = useNavigate()
  const [loading, setLoading] = useState(false)

  const onFinish = async (values: any) => {
    try {
      setLoading(true)
      console.log('提交的值:', values)
      // TODO: 调用添加接口
      message.success('添加成功')
      navigate('/appVersionManagement')
    } catch (error) {
      message.error('添加失败')
    } finally {
      setLoading(false)
    }
  }
  useEffect(() => {
    const { record } = location.state || {}
    console.log(record, 'record---');
    
    if (record) {
        form.setFieldsValue(record)
    }
  }, [location.state, form])
  return (
    <div className="add-app-version">
      <div className="basic-info">
        <div className="title">基本信息</div>
        <Form
          form={form}
          onFinish={onFinish}
          initialValues={{
            forceUpdate: false,
            updateDisplay: false
          }}
        >
          <Form.Item
            label="产品名称"
            name="name"
            rules={[{ required: true, message: '请输入产品名称' }]}
          >
            <Input placeholder="请输入版本号" />
          </Form.Item>
          <Form.Item
            label="产品类型"
            name="type"
            rules={[{ required: true, message: '请选择产品类型' }]}
          >
            <Checkbox.Group options={['Android', 'IOS']} />
          </Form.Item>
          <Form.Item
            label="版本号"
            name="version"
            rules={[{ required: true, message: '请输入版本号' }]}
          >
            <Input placeholder="请输入版本号" />
          </Form.Item>

          <Form.Item
            label="更新描述"
            name="updateDescription"
          >
            <TextArea
              placeholder="请输入更新门描述，最多不超过200字"
              maxLength={200}
              showCount
              rows={4}
            />
          </Form.Item>
          <div className="form-actions">
            <Button onClick={() => navigate('/appVersionManagement')}>
              返回
            </Button>
            <Button type="primary" htmlType="submit" loading={loading}>
              保存
            </Button>
          </div>
        </Form>
      </div>
      <div className="basic-info">
        <div className="title">更新升级配置</div>
        <Form
          form={form}
          onFinish={onFinish}
          initialValues={{
            forceUpdate: false,
            updateDisplay: false
          }}
        >
          <Form.Item
            label="强制更新"
            name="forceUpdate"
            valuePropName="checked"
            rules={[{ required: true, message: '请选择是否强制更新' }]}
          >
            <Switch />
          </Form.Item>

          <Form.Item
            label="更新显示"
            name="updateDisplay"
            valuePropName="checked"
            rules={[{ required: true, message: '请选择是否更新显示' }]}
          >
            <Switch />
          </Form.Item>

          <Form.Item
            label="Android下载地址"
            name="androidUrl"
            rules={[{ required: true, message: '请输入Android下载地址' }]}
          >
            <Input placeholder="请输入安卓下载地址" />
          </Form.Item>

          <Form.Item
            label="IOS下载地址"
            name="iosUrl"
            rules={[{ required: true, message: '请输入IOS下载地址' }]}
          >
            <Input placeholder="请输入IOS下载地址" />
          </Form.Item>
          <div className="form-actions">
            <Button color="primary" variant="outlined">
              预览
            </Button>
            <Button type="primary" htmlType="submit" loading={loading}>
              保存
            </Button>
            <Button onClick={() => navigate(-1)}>
              返回
            </Button>
          </div>
        </Form>
      </div>
    </div>
  )
}

export default observer(AddAppVersion)